<template>
  <div id="mytitle">
        <div class="logo">
          <router-link to="/"><i class="el-icon-upload"></i></router-link>
        </div>
          <div class="tools">
              <el-dropdown trigger="click" style="margin-top:3px;" size="small">
          <span  class="el-dropdown-link">
            文件(F)
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>打开文件</el-dropdown-item>
            <el-dropdown-item>打开文件夹</el-dropdown-item>
            <el-dropdown-item divided>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown size="small">
          <span class="el-dropdown-link">
            编辑(E)
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>复制</el-dropdown-item>
            <el-dropdown-item>粘贴</el-dropdown-item>
            <el-dropdown-item>剪切</el-dropdown-item>
            <el-dropdown-item divided>查找</el-dropdown-item>
            <el-dropdown-item>替换</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown size="small">
          <span  class="el-dropdown-link">
            查看(V)
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><router-link to="/">资源管理器</router-link></el-dropdown-item>
            <el-dropdown-item divided>外观</el-dropdown-item>
            <el-dropdown-item>布局</el-dropdown-item>
            <el-dropdown-item divided>命令面板</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown  size="small">
          <span class="el-dropdown-link">
            终端(T)
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>新终端</el-dropdown-item>
            <el-dropdown-item divided>运行任务</el-dropdown-item>
            <el-dropdown-item divided @click="openConsole">调试</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown  size="small">
          <span class="el-dropdown-link">
            帮助(H)
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>入门</el-dropdown-item>
            <el-dropdown-item>文档</el-dropdown-item>
            <el-dropdown-item divided>检查更新</el-dropdown-item>
            <el-dropdown-item divided>关于</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
          </div>
        
        <div class="main_button">
          <el-button-group>
            <el-button
              size="mini"
              type="info"
              icon="el-icon-minus"
              plain
             @click="min"></el-button>
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-news"
             @click="max"></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-close"
             @click="close"></el-button>
          </el-button-group>
        </div>
  </div>
</template>

<script>
export default {
  name: "Mytitle",
  data() {
    return {};
  },
  methods: {
    min(){
        this.$electron.remote.getCurrentWindow().minimize();
    },
    max(){
        const remote = this.$electron.remote;
        const browserWindow = remote.getCurrentWindow();
        if(browserWindow.isMaximized()) {
            browserWindow.unmaximize();
        } else {
            browserWindow.maximize();
        }
    },
    close(){
        this.$electron.remote.getCurrentWindow().close();
    },
    openConsole(){
      this.$electron.remote.getCurrentWindow().contents.openDevTools();
    }
  },
};
</script>
    
<style>
#mytitle {
  width: 99%;
  height: 28px;
  background-color: rgb(136, 200, 253);
  -webkit-app-region: drag;
}
.main_button {
  overflow: hidden;
  height: 28px;
  top: 0px;
  right: 0px;
  position: absolute;
  -webkit-app-region: no-drag;
}
.logo i {
  font-size: 25px;
  margin-left: 10px;
  color: rgb(49, 28, 10);
  -webkit-app-region: no-drag;
}

.el-dropdown-link {
    margin-top: 3px !important;
    margin-right: 10px !important;
    cursor: pointer;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

.tools{
  -webkit-app-region: no-drag;
  position: absolute;
  left : 5%;
  top: 0px;
}

</style>